<template>
  <div class="xtx-product">
    <div class="container">
      <div class="xtx-product-box" ref="target">
        <Panel
          :title="product.name"
          v-for="product in result"
          :key="product.id"
        >
          <template #head-right>
            <div class="xtx-product-header-right">
              <ul class="xtx-product-types">
                <li
                  class="xtx-product-types__item"
                  v-for="type in product.children"
                  :key="type.id"
                >
                  <router-link to="/">{{ type.name }}</router-link>
                </li>
              </ul>
              <!-- 更多 -->

              <More path="/" />
            </div>
          </template>
          <template #panel-content>
            <div class="product-box">
              <div class="xtx-product-body">
                <router-link to="/" class="xtx-product-body-image">
                  <img v-lazyload="product.picture" alt="" />
                  <strong class="xtx-product-body-image__label">
                    <span>{{ product.name }}馆</span>
                    <span>{{ product.saleInfo }}</span>
                  </strong>
                </router-link>
                <ul class="xtx-product-body-goodslist">
                  <li
                    class="xtx-product-body-goodslist__item"
                    v-for="good in product.goods"
                    :key="good.id"
                  >
                    <Goods :goods="good" />
                  </li>
                </ul>
              </div>
            </div>
          </template>
        </Panel>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Panel from './Panel.vue'
import Goods from './Goods.vue'
import More from '@/components/More.vue'
import { productListAPI } from '@/api/home'
import { useLazyData } from '@/hooks/useLazyData'
import { type Product } from '@/api/home/types.d'
defineOptions({
  name: 'product'
})

/** 获取商品列表 */
const { result, target } = useLazyData<Product>(productListAPI)
</script>

<style lang="scss" scoped>
.xtx-product {
  height: 2908px;
  background-color: $basic-white;

  &-header-right {
    display: flex;
  }

  &-box {
    position: relative;
  }

  &-types {
    display: flex;
    margin-right: 80px;

    &__item {
      padding: 2px 8px;

      & ~ & {
        margin-left: 5px;
      }
    }
  }

  &-body {
    position: relative;
    display: flex;

    &-image {
      position: relative;
      display: block;
      width: 240px;
      height: 610px;

      img {
        width: 100%;
        height: 100%;
      }

      &__label {
        position: absolute;
        top: 50%;
        left: 0;
        font-weight: 400;
        font-size: 18px;
        transform: translateY(-50%);

        span {
          display: inline-block;
          padding: 0 10px;
          line-height: 66px;
          color: $basic-white;

          &:first-child {
            background-color: rgba(0, 0, 0, 0.9);
          }

          &:last-child {
            background-color: rgba(0, 0, 0, 0.7);
          }
        }
      }
    }

    &-goodslist {
      display: flex;
      flex-wrap: wrap;
      width: 1000px;

      &__item {
        margin-left: 10px;

        &:nth-child(n + 5) {
          margin-top: 10px;
        }
      }
    }
  }

  .skeleton {
    position: relative;
    display: flex;

    .list {
      width: 1000px;

      .item {
        margin-left: 10px;

        &:nth-child(n + 5) {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
